<template>
<div class="collection-information">
    <div class="mode">
        <p class="tit">选择收款方式</p>
        <div class="content">
            <span @click="changeType(item)" v-for="(item, index) in typeList" :key="index" :class="{ active: type == item.type }">{{ item.name
          }}<img v-if="type == item.type" src="./img/right.png" alt="" /></span>
        </div>
    </div>
    <div class="information">
        <p class="tit">收款账户信息</p>
        <p class="tips">为确保收到退款资金，请务必填写准确</p>
        <div class="item" v-for="(item, index) in list" :key="index">
            <p class="info">{{ item.title }}</p>
            <div class="input">
                <input type="text" v-model="item.value" :placeholder="item.placeholder" :maxlength="true" @keyup="inputValue(item)" @paste="inputValue(item)" />
                <span>{{ item.value != "" ? "修改" : "填写" }}</span>
            </div>
        </div>
    </div>
    <div class="pay-tips">
        <p>温馨提示：</p>
        <p>1. 大枣向您承诺以上信息仅用于本应应服务退款；</p>
        <p>2. 请认真填写准确的账号信息，以保证退款能成功到账</p>
    </div>
    <div class="bottom" v-show="isOrigin">
        <span class="back">返回上一页</span>
        <span class="confirm">确认提交</span>
    </div>
    <div class="dialog" v-if="false">
        <div class="dialog-content">
            <div class="dialog-content-header">
                <img class="dialog-content-header-close" src="./img/icon_close.png" />
            </div>
            <div class="dialog-content-center">
                <div class="send-out" v-if="false">
                    <p class="title">验证码将发送到</p>
                    <p class="phone">189 2354 5789</p>
                    <p class="tips">请验证身份。验证成功后进行下一步操作。</p>
                </div>
                <div class="enter-code">
                    <p class="title">输入验证码</p>
                    <p class="code-info">验证码已发送至18923547454</p>
                    <div class="wrap">
                        <label for="code">
                            <ul class="container">
                                <li class="field-wrap error" v-for="(item, index) in number" :key="index">
                                    <i class="char-field">{{codeValue[index]}}</i>
                                </li>
                            </ul>
                        </label>
                        <input ref="input" class="input-code" @keyup="handleInput($event)" v-model="codeValue" id="code" name="code" type="tel" :maxlength="number" autocorrect="off" autocomplete="off" autocapitalize="off">
                        <div class="input-error">验证码有误</div>
                    </div>
                    <p class="code-time" v-if="codeTime < 10">重新发送({{codeTime}}s)</p>
                    <p class="tips" v-if="codeTime == 10">未收到验证码？<span @click="countdown()">重新发送</span></p>
                    <p class="code-error">已超过每日获取验证码上限，请明天再试</p>
                </div>
            </div>
            <div class="dialog-content-bottom">
                <span class="dialog-content-bottom-confirm error">发送验证码</span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            number: 6,
            codeValue: "",
            codeTime: 10,
            type: 1,
            typeList: [{
                    name: "微信",
                    type: 1,
                },
                {
                    name: "支付宝",
                    type: 2,
                },
                {
                    name: "借记卡",
                    type: 3,
                },
            ],
            cardlist: [{
                    title: "开户银行",
                    value: "",
                    placeholder: "请输入银行信息",
                    status: 0, //0=>填写 1=>修改
                },
                {
                    title: "银行卡号",
                    value: "",
                    placeholder: "请输入银行卡号",
                    status: 0,
                    bankCard: true,
                },
                {
                    title: "持卡人姓名",
                    value: "",
                    placeholder: "请输入持卡人姓名",
                    status: 0,
                },
                {
                    title: "联系方式",
                    value: "",
                    placeholder: "请输入联系方式",
                    status: 0,
                    phone: true,
                },
            ],
            wxList: [{
                    title: "微信昵称",
                    value: "",
                    placeholder: "请输入微信昵称",
                    status: 0,
                },
                {
                    title: "微信账号",
                    value: "",
                    placeholder: "请输入微信账号",
                    status: 0,
                },
                {
                    title: "联系方式",
                    value: "",
                    placeholder: "请输入联系方式",
                    phone: true,
                    status: 0,
                },
            ],
            payList: [{
                    title: "支付宝昵称",
                    value: "",
                    placeholder: "请输入支付宝昵称",
                    status: 0,
                },
                {
                    title: "支付宝账号",
                    value: "",
                    placeholder: "请输入支付宝账号",
                    status: 0,
                },
                {
                    title: "联系方式",
                    value: "",
                    placeholder: "请输入联系方式",
                    status: 0,
                    phone: true,
                },
            ],
            isOrigin: true,
            screenHeight: window.innnerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight,
            originHeight: window.innnerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight,
        };
    },
    watch: {
        screenHeight(val) {
            if (this.originHeight != val) {
                this.isOrigin = false;
            } else {
                this.isOrigin = true;
            }
        },
    },
    computed: {
        list() {
            if (this.type == 1) {
                return this.wxList;
            } else if (this.type == 2) {
                return this.payList;
            } else {
                return this.cardlist;
            }
        },
    },
    methods: {
        hideKeyboard() {
            document.activeElement.blur() // ios隐藏键盘
            this.$refs.input.blur() // android隐藏键盘
        },
        handleInput() {
            this.$refs.input.value = this.codeValue
            if (this.codeValue.length >= this.number) {
                this.hideKeyboard()
            }
        },
        clearValue(val) {
            val.map(item => {
                item.value = ""
            })
            return val
        },
        changeType(item) {
            this.type = item.type;
            if (this.type == 1) {
                this.payList = this.clearValue(this.payList)
                this.cardlist = this.clearValue(this.cardlist)
            } else if (this.type == 2) {
                this.wxList = this.clearValue(this.wxList)
                this.cardlist = this.clearValue(this.cardlist)
            } else {
                this.wxList = this.clearValue(this.wxList)
                this.payList = this.clearValue(this.payList)
            }
        },
        inputValue(item) {
            if (item.bankCard) {
                item.value = item.value.replace(/\D/g, "");
                item.value = item.value.replace(/(\d{4})(?=\d)/g, "$1 ");
            }
            if (item.phone) {
                let value = item.value.replace(/\D/g, "").substr(0, 11); // 不允许输入非数字字符，超过11位数字截取前11位
                let len = value.length;
                if (len > 3 && len < 8) {
                    value = value.replace(/^(\d{3})/g, "$1 ");
                } else if (len >= 8) {
                    value = value.replace(/^(\d{3})(\d{4})/g, "$1 $2 ");
                }
                item.value = value;
            }
        },
        countdown() {
            if (this.codeTime == 0) {
                this.codeTime = 10;
                return false;
            } else {
                this.codeTime--;
            }
            setTimeout( ()=> {
                this.countdown();
            }, 1000);
        },
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.screenHeight =
                    window.innnerHeight ||
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;
            })();
        };
    },
};
</script>

<style lang="less">
@import "index.less";
</style>
